import React from "react";
import {Chat} from "react-jwchat"
import axios from "axios";

export default class Question extends React.Component {
    constructor(props) {
        super(props);
        this.state = ({
            contact: {
                id: 0,
                avatar: '/1.png',
                nickname: '古诗词问答',
                message: '这是一条信息',
                // date: '02-11',
                desc: '基于知识图谱的古诗词问答系统',
            },
            my: {
                id: 1,
                avatar: '/1.png',
                nickname: '我',
                message: '',
                // date: '02-11',
                desc: '',
            },
            msgList: [{
                _id: 0,
                date: new Date().getTime() / 1000,
                // date: 0,
                user: {
                    id: 0,
                    avatar: '/1.png',
                    nickname: '古诗词问答',
                    desc: '',
                },
                message: {type: 'text', content: '您好！我是基于知识图谱的古诗词问答系统！'},
            },]
        })
    }

    send = (msg) => {
        // console.log(msg)
        const msgList = this.state.msgList;
        msgList.push(msg)
        this.setState({
            msgList: msgList
        })
        var div = document.getElementsByClassName("style-module_list_area__3dtJ8")[0];
        // var div = document.getElementsByClassName("style-module_wrapper_content__FNELi")[0];
        div.scrollTop = div.scrollHeight;
        var question = msg.message.content;
        axios.get("http://localhost:8088/question/query", {
            params: {
                question: question
            }
        }).then(
            (res) => {
                let message = res.data;
                message = message.split("<br>");

                console.log(message);
                msgList.push({
                    _id: this.state.msgList.length,
                    // date: 0,
                    date: new Date().getTime() / 1000,
                    user: this.state.contact,
                    message: {type: 'text', content: message},
                })
                this.setState({
                    msgList: msgList
                })
                // console.log(div)
                var l = document.getElementsByClassName("style-module_text_content__3oMUf").length
                var div1 = document.getElementsByClassName("style-module_text_content__3oMUf")[l - 1]
                div1.innerText="";
                for (var i = 0; i < message.length; i++) {
                    var div2=document.createElement("div");
                    div2.innerText=message[i];
                    div1.appendChild(div2);
                }
                div.scrollTop = div.scrollHeight;
            }
        )
    }

    render() {

        return (
            <div style={{padding: "0px auto"}}>
                <Chat
                    contact={this.state.contact}
                    me={this.state.my}
                    chatList={this.state.msgList}
                    onSend={(msg) => this.send(msg)}
                    onEarlier={() => {
                    }}
                    onImage={(files) => {
                    }}
                    style={{
                        margin: "10px auto",
                        width: 600,
                        height: 500,
                    }}
                />
            </div>
        );
    }
}